import React from 'react'
import View from 'lib/View.jsx'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import RootScope from './RootScope.es6'
import Select2 from 'lib/components/Select.jsx'
import cx from 'classnames'
import dispatcher from 'lib/dispatcher'
import _ from 'underscore'
import DropdownList from 'lib/components/DropdownList.jsx'
import tips from '../common/indicator-tips.jsx'
import Resizable from 'lib/components/Resizable.jsx'

export default class RootView extends View {

  customDateCheckHandler(item) {
    dispatcher.dispatch({
      $type: 'custom_date_check',
      item: item
    });
  }

  dateCheckHandler(dayUnit) {
    dispatcher.dispatch({
      $type: 'predefined_date_check',
      dayUnit: dayUnit
    });
  }

  stateCodeCheckHandler(e) {
    dispatcher.dispatch({
      $type: 'change_status_code',
      value: e.target.checked ? e.target.value : null
    });
  }

  tableDateChangeHandler(value) {
    dispatcher.dispatch({
      $type: 'change_table_date',
      value: value.value
    });
  }

  searchHandler(e) {
    e.preventDefault();

    let searchValue = this.refs.searchValue.value.trim();
    dispatcher.dispatch({
      $type: 'search_list',
      value: searchValue
    });
  }

  toggleHiddenTable() {
    dispatcher.dispatch({
      $type: 'toggle_hidden_table',
      value: !this.state.showHiddenTable
    });
  }

  dateOtherClickHandler() {
    dispatcher.dispatch({
      $type: 'toggle_date_other_display'
    });
  }

  resizeGridSize(current, original) {
    if ((current.width < 1000 && original.width >= 1000) ||
        (current.width >= 1000 && original.width < 1000)) {
      dispatcher.dispatch({
        $type: 'resize_grid_size',
        current
      });
    }
  }

  render() {

    return (
      <div>
        <div className="pure-g">
          <div className="pure-u-1 pure-u-lg-4-5">
            <div className="box">
              <Card title={
                <span>
                  ANR 率趋势信息图
                  <i className="iconfont" data-tip="ANR 率 = 影响用户数 / 活跃用户数">&#xe663;</i>
                </span>
              } extra={
                <div>
                  <div className="switch-group" style={{'margin': '2px 0px 0px'}}>
                    <a
                      href="javascript:;"
                      onClick={this.dateCheckHandler.bind(this, 'today')}
                      className={cx({active: this.state.chartDateCheckStatus['today']})}>
                      今天
                    </a>
                    <a
                      href="javascript:;"
                      onClick={this.dateCheckHandler.bind(this, 'yesterday')}
                      className={cx({active: this.state.chartDateCheckStatus['yesterday']})}>
                      昨天
                    </a>
                    <a
                      href="javascript:;"
                      onClick={this.dateOtherClickHandler.bind(this)}
                      className={cx({active: this.state.chartDateListSelectedValue!==null})}>
                      <span style={{ fontWeight: 'normal' }}>
                        { this.state.chartDateListSelectedValue
                            ? _.find(this.state.chartDateList, (item) => item.value === this.state.chartDateListSelectedValue).label
                            : '其它'
                        }
                      </span>
                      <i className="iconfont icon-btn-arrow">&#xe619;</i>
                    </a>
                  </div>
                  <div ref="dateOtherRoot" className="dropdown" style={{display: (this.state.chartDateListOpened ? 'block' : 'none')}}>
                    <div className="dropdown-main">
                      <ul>
                        {
                          this.state.chartDateList.map((item) => {
                            return (<li key={'DropdownList-item-' + item.value}><a onClick={this.customDateCheckHandler.bind(this, item)}>{item.label}</a></li>);
                          })
                        }
                      </ul>
                    </div>
                  </div>
                </div>
              }>
                <ChartWidget height={246} store={ this.state.chart } tooltipShared={true} tooltipFormat={this.state.chartformatter} chartSettings={this.state.chartSettings}/>
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-lg-1-5">
            <div className="box">
              <Card title={
                <div>
                  今日数据
                </div>
              }>
                <div style={{'textAlign':'center', 'height':'260px'}}>
                  <div className="pure-g" style={{'marginTop':'-14px'}}>
                    <div className="pure-u-1">
                      <p style={{'fontSize':'36px', 'marginTop':'10px'}}>{this.state.anrRate}</p>
                      <p style={{'fontSize':'12px', 'marginTop':'-8px'}}>ANR 率</p>
                    </div>
                  </div>
                  <div className="pure-g" style={{'marginTop':'10px'}}>
                    <div className="pure-u-1">
                      <p style={{'fontSize':'36px', 'marginTop':'10px'}}>{this.state.anrCount}</p>
                      <p style={{'fontSize':'12px', 'marginTop':'-8px'}}>ANR 次数</p>
                    </div>
                  </div>
                  <div className="pure-g" style={{'marginTop':'10px'}}>
                    <div className="pure-u-1">
                      <p style={{'fontSize':'36px', 'marginTop':'10px'}}>{this.state.anrUserCount}</p>
                      <p style={{'fontSize':'12px', 'marginTop':'-8px'}}>ANR 影响用户</p>
                    </div>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card title={
                <span>
                  ANR类型列表
                  <i className="iconfont" data-tip="按 App 版本与 ANR 类型进行分类展示 ANR 问题">&#xe663;</i>
                </span>
              } extra={
                <div>
                  <div style={{'display':'inline-block', 'margin': 'auto 10px'}}>
                    <input onChange={this.stateCodeCheckHandler.bind(this)} type="checkbox" value="0"/>
                    <span>未解决</span>
                  </div>
                  <DropdownList
                    key={'tableDateList'}
                    style={{'margin': 'auto 10px', 'minWidth':'80px'}}
                    dropdownStyle={{minWidth:'80px'}}
                    current={_.find(this.state.tableDateList, (item) => item.value === this.state.tableDateListSelectedValue)}
                    list={this.state.tableDateList}
                    onChanging={this.tableDateChangeHandler.bind(this)}
                  />
                  <form onSubmit={this.searchHandler.bind(this)} style={{'display':'inline-block', 'margin': 'auto 0px auto 10px'}}>
                    <input ref="searchValue" style={{'width': 'auto'}} className="input-text" type="text" placeholder="问题描述..."/>
                  </form>
                </div>
              }>
                <Resizable onResize={this.resizeGridSize}>
                  <GridWidget cols={this.state.gridColumns} store={this.state.list} endTime={this.state.current} />
                </Resizable>
              </Card>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

RootView.defaultProps = {
  Scope: RootScope
}
